<template>
  <div class="数字地图">
    <div class="内容">
      <!-- 页面标题 -->
      <div class="页面标题">
        <h1>数字地图</h1>
        <p>本页面展示了小麦种植区域分布和相关数据统计</p>
      </div>
      
      <!-- 筛选工具栏 -->
      <div class="筛选工具栏">
        <div class="筛选组">
          <span>年份：</span>
          <el-select v-model="已选年份" placeholder="选择年份">
            <el-option label="2022" value="2022"></el-option>
            <el-option label="2023" value="2023"></el-option>
            <el-option label="2024" value="2024"></el-option>
          </el-select>
        </div>
        
        <div class="筛选组">
          <span>地区：</span>
          <el-select v-model="已选地区" placeholder="选择地区" multiple collapse-tags>
            <el-option label="华北地区" value="northChina"></el-option>
            <el-option label="华东地区" value="eastChina"></el-option>
            <el-option label="华南地区" value="southChina"></el-option>
            <el-option label="西北地区" value="northwestChina"></el-option>
            <el-option label="西南地区" value="southwestChina"></el-option>
          </el-select>
        </div>
        
        <div class="筛选组">
          <span>数据类型：</span>
          <el-radio-group v-model="已选数据类型">
            <el-radio-button label="产量">产量</el-radio-button>
            <el-radio-button label="品质">品质</el-radio-button>
            <el-radio-button label="种植面积">种植面积</el-radio-button>
          </el-radio-group>
        </div>
        
        <el-button type="primary" @click="应用筛选">应用筛选</el-button>
        <el-button @click="重置筛选">重置</el-button>
      </div>
      
      <!-- 地图展示区域 -->
      <div class="地图区域">
        <div class="地图容器">
          <div id="chinaMap" class="地图"></div>
        </div>
        
        <!-- 地图数据统计 -->
        <div class="地图统计">
          <h3>区域统计数据</h3>
          <div class="统计网格">
            <div class="统计卡片">
              <div class="统计数值">{{总种植面积}}</div>
              <div class="统计标签">总种植面积(万亩)</div>
            </div>
            <div class="统计卡片">
              <div class="统计数值">{{总产量}}</div>
              <div class="统计标签">总产量(万吨)</div>
            </div>
            <div class="统计卡片">
              <div class="统计数值">{{平均品质评分}}</div>
              <div class="统计标签">平均品质评分</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 数据表格 -->
      <div class="数据表格区域">
        <h3 class="区域标题">详细数据</h3>
        <el-table :data="区域数据" style="width: 100%">
          <el-table-column prop="地区名称" label="地区名称" width="180"></el-table-column>
          <el-table-column prop="种植面积" label="种植面积(万亩)" width="180"></el-table-column>
          <el-table-column prop="产量" label="产量(万吨)" width="180"></el-table-column>
          <el-table-column prop="品质评分" label="品质评分" width="180"></el-table-column>
          <el-table-column prop="生长状况" label="生长状况"></el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="scope">
              <el-button type="primary" size="small" @click="查看地区详情(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  AreaChart,
  BarChart3,
  Map,
  RefreshCw,
  Search
} from '@element-plus/icons-vue'

export default {
  name: '数字地图',
  components: {
    AreaChart,
    BarChart3,
    Map,
    RefreshCw,
    Search
  },
  props: {
    数据: {
      type: [Object, Array],
      default: null
    }
  },
  data() {
    return {
      已选年份: '2023',
      已选地区: [],
      已选数据类型: '产量',
      图表实例: null,
      // 模拟区域数据
      区域数据: [
        { 地区名称: '华北地区', 种植面积: 1250, 产量: 680, 品质评分: 85, 生长状况: '良好' },
        { 地区名称: '华东地区', 种植面积: 980, 产量: 520, 品质评分: 88, 生长状况: '优秀' },
        { 地区名称: '华南地区', 种植面积: 450, 产量: 210, 品质评分: 76, 生长状况: '一般' },
        { 地区名称: '西北地区', 种植面积: 820, 产量: 380, 品质评分: 82, 生长状况: '良好' },
        { 地区名称: '西南地区', 种植面积: 650, 产量: 290, 品质评分: 80, 生长状况: '良好' }
      ]
    }
  },
  computed: {
    总种植面积() {
      return this.区域数据.reduce((sum, item) => sum + item.种植面积, 0)
    },
    总产量() {
      return this.区域数据.reduce((sum, item) => sum + item.产量, 0)
    },
    平均品质评分() {
      if (this.区域数据.length === 0) return 0
      const totalScore = this.区域数据.reduce((sum, item) => sum + item.品质评分, 0)
      return (totalScore / this.区域数据.length).toFixed(1)
    }
  },
  methods: {
    初始化地图() {
      const mapDom = document.getElementById('chinaMap')
      this.图表实例 = echarts.init(mapDom)
      
      // 由于ECharts需要地图数据，这里我们使用简化的地图表示
      const option = {
        title: {
          text: '小麦种植区域分布',
          left: 'center',
          textStyle: {
            color: '#145A32',
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          bottom: 10
        },
        visualMap: {
          min: 0,
          max: 1500,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: true,
          inRange: {
            color: ['#D4EFDF', '#145A32']
          }
        },
        series: [{
          name: '种植面积(万亩)',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.区域数据.map(item => ({
            name: item.地区名称,
            value: item.种植面积
          }))
        }]
      }
      
      this.图表实例.setOption(option)
    },
    
    应用筛选() {
      // 这里应该是根据筛选条件从后端获取数据的逻辑
      // 目前仅做前端展示
      this.$message.success('筛选条件已应用')
      // 重新渲染图表
      if (this.图表实例) {
        this.图表实例.dispose()
        this.初始化地图()
      }
    },
    
    重置筛选() {
      this.已选年份 = '2023'
      this.已选地区 = []
      this.已选数据类型 = '产量'
      this.$message.info('筛选条件已重置')
    },
    
    查看地区详情(row) {
      this.$message.info(`查看 ${row.地区名称} 详情`)
      // 这里应该是跳转到详情页面或打开详情弹窗的逻辑
    },
    
    调整地图大小() {
      if (this.图表实例) {
        this.图表实例.resize()
      }
    }
  },
  mounted() {
    this.初始化地图()
    window.addEventListener('resize', this.调整地图大小)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.调整地图大小)
    if (this.图表实例) {
      this.图表实例.dispose()
    }
  }
}
</script>

<style scoped>
.数字地图 {
  min-height: 100vh;
  background: #f5f7fa;
}

.内容 {
  padding: 2rem 0;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.页面标题 {
  text-align: center;
  margin-bottom: 2rem;
}

.页面标题 h1 {
  color: #1890ff;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.页面标题 p {
  color: #666;
  font-size: 1.2rem;
}

.筛选工具栏 {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.筛选组 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.地图区域 {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.地图容器 {
  flex: 2;
  min-width: 500px;
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.地图 {
  width: 100%;
  height: 400px;
}

.地图统计 {
  flex: 1;
  min-width: 300px;
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.地图统计 h3 {
  color: #1890ff;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.统计网格 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.统计卡片 {
  background: white;
  padding: 1rem;
  border-radius: 6px;
  text-align: center;
  border-left: 4px solid #1890ff;
}

.统计数值 {
  font-size: 1.8rem;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 0.3rem;
}

.统计标签 {
  color: #666;
  font-size: 0.9rem;
}

.数据表格区域 {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.区域标题 {
  color: #1890ff;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}
</style>
